<template>
    <div class="category">
        <h3>{{title}}分类</h3>
        <!-- 
            作用域插槽：可将组件本身带有的数据或一些自定义数据传给组件的使用者。（谁使用就传递给谁）
            下面传递了两个数据：一个是data中定义的；另一个是自定义的msg 
        -->
        <slot :games="games" msg="hello">这是我默认的内容</slot>
    </div>
</template>

<script>

    export default {
        // 声明接收父组件传过来的分类数据和分类名称
        props:['title'],
        name:"Category",
        data() {
            return {
                games:['红色警戒', '穿越火线', '劲舞团'],
            }
        }
    }
</script>

<style scoped>
    .category {
        background-color: skyblue;
        width: 200px;
        height: 300px;
    }

    h3 {
        text-align: center;
        background-color: orange;
    }

    img {
        width: 100%;
    }

    video {
        width: 100%;
    }

    .footer {
        display: flex;
        justify-content: space-around;
    }

    h4 {
        text-align: center;
    }
</style>